import React from "react";
import { NavBar, Space, Toast, Tabs, Badge } from "antd-mobile";
import { SearchOutline, ShopbagOutline } from "antd-mobile-icons";
import "../../MIUIcss/User/myolder.scss";
export default function myolder() {
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ "--gap": "16px" }}>
        <SearchOutline />
        <ShopbagOutline />
      </Space>
    </div>
  );

  const back = () =>
    Toast.show({
      content: "点击了返回区域",
      duration: 1000,
    });
  return (
    <div className="myolder">
      <div title="自定义右侧区域" padding="0">
        <NavBar right={right} onBack={back}>
          商品订单
        </NavBar>
      </div>
      <div title="基本用法" padding="0">
        <Tabs>
          <Tabs.Tab title="全部" key="fruits">
            <div className="commodity">
              <div className="cy_hr">
                <span>2022-2-1 12.00</span>
                <span>已出库</span>
              </div>
              <ul className="cy_mn">
                <li>
                  <div className="cy_img">
                    <img
                      src="https://img.xiaopiu.com/userImages/img1405160784ec788.png"
                      alt=""
                    />
                  </div>
                  <div className="cy_name">
                    <p>米家机器人</p>
                    <p>白色</p>
                  </div>
                  <div className="cy_price">
                    <p>49</p>
                    <p>x1</p>
                  </div>
                </li>
                <li>
                  <div className="cy_img">
                    <img
                      src="https://img.xiaopiu.com/userImages/img1405160784ec788.png"
                      alt=""
                    />
                  </div>
                  <div className="cy_name">
                    <p>米家机器人</p>
                    <p>白色</p>
                  </div>
                  <div className="cy_price">
                    <p>49</p>
                    <p>x1</p>
                  </div>
                </li>
              </ul>
              <div className="cy_fr">
                <div>
                  共3件商品 实付金额:￥<span>1693.00</span>
                </div>
                <div>
                  <button>申请售后</button>
                  <button>评价晒单</button>
                </div>
              </div>
            </div>
          </Tabs.Tab>
          <Tabs.Tab title="待付款" key="vegetables">
            待付款
          </Tabs.Tab>
          <Tabs.Tab title="待收货" key="animals">
            待收货
          </Tabs.Tab>
          <Tabs.Tab title="待评价" key="daipingjia">
            待评价
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  );
}
